Note: This may not be the first first code released, but it appears to be the earliest copy that we’ve found, so far. This is a copy that was indexed by the Internet Archive on Feb 3rd 2006, so about 2.5 weeks after the initial release. It’s very likely that a few things changed in that time period and I’ll try to make a note of some of those, that I can remember, inline.

My post-mortem blog post where I announce what I released at BarCamp NYC:
John Resig - BarCampNYC Wrap-up

jQuery was just one of a couple projects that I had been working on! After the release at Barcamp I did a lot to try and promote the library, mostly on Digg and Delicious (which were the two top places for promoting links at that time).

https://previous.delicious.com/url/32b2c30383abf5f586d72c1bf6cccab1

You can read more about the history of jQuery here:
History | jQuery Foundation

I guess it took me a little bit to develop the now-preferred ‘jQuery’ capitalization! I originally called this library “JSelect” (for selecting elements out of the page, plus it started with JS, which was nice). However the domain name jselect.com wasn’t available, thus I had to find another name.

Even though the domain was available there apparently was another project (a Java SQL library) named jQuery. They had owned this domain a while back but had let it lapse. I only found this out later after they contacted me to let me know about the name conflict! I felt bad, I had definitely wanted to avoid causing any confusion!

The very first release of jQuery (and for the next few months of releases) was under a Creative Commons license. I had released tons of open source projects before this point but I hadn’t put a license on anything as no one had ever asked for one! (Probably says something about how many people used them, ha!) In retrospect a CC license is a poor choice for code and I switched to using an MIT license pretty soon after.

At one point I went back and looked at the open source projects that I had released before jQuery. I counted 75 projects before this one! Before jQuery my most famous works were: A browser bookmarklet for easily saving links to Delicious (called LazySheep), a tool for navigating Wikipedia edit history (with which I won 2nd place in a contest), and a mini-library for binding events to DOM elements (which won 1st place in a contest and will talk about later as it influenced jQuery!).

The infamous ‘$’! This, along with a lot of the functionality in jQuery, is directly inspired by the Prototype JavaScript library. The library was bundled with Rails, which was super-hot in 2005, when I was developing this library, and I loved a lot of the techniques that they were promoting. I aspired to have jQuery be a drop-in library that you could use side-by-side with Prototype.

just trying the genius tool. for a n00b looking at this code … what is a and c? (not the point of john’s annotations … just curious what else this could do diving in and out of “words”). also curious to see how the annotation “threads” are sorted.

So this may look crazy – it certainly does to me! Why not just do: f.call(this._get(i))? If I remember correctly, and I just did some double-checking and I think this is the case, but IE 5 didn’t support .call()! The original version of jQuery event worked back to IE 5… I can hardly believe. I think we ended up dropping support for IE 5 pretty soon after and “upgraded” to IE 6, which made stuff like this obsolete.

This was later re-named into ‘.attr()’, since having another method named .get() (which gave you a DOM element) didn’t really make sense.

So this is almost certainly not the first first release of the library as there are already deprecated methods. Deprecated after two weeks! Code moves so quickly :)

I want to just take a moment to note how little has changed in how these functions work, at an API level. There’s a strong chance that you could take circa-2006 jQuery-using code and drop in a modern version and have it still work. Granted much more was added later on, as it increased in scope beyond my simple use cases, but almost all of the API that we see here was left intact. I’m definitely proud of the fact that the API was “good enough” to last over the next decade – and beyond.

Now, granted, there are a lot of things I would have loved to change about the API and as time went on it became harder, and harder, to do so (we desperately wanted to avoid breaking backwards compatibility). Regardless, we’re here now and as we can tell from the stats it seems to have been good enough!

I really dis-liked having unnecessary braces. This… unfortunate… style preference plagued us for quite a while and caused all sorts of avoidable logic errors.

Whoops! Assuming that everything was going to be a block was a mistake that we had to rectify later. Unfortunately ‘fixing’ this ended up being a lot harder than we expected! If you have some CSS that’s like “.foo { display: inline }” and you have a <div class="foo"></div> the only way you can figure out how it should become “visible” is to insert another div with that class and try to figure out what it’s final state should become. In general show/hide is a great convenience but it’s also a huge case for slow-downs and edge cases. We generally recommend toggling class names now instead.

jQuery had proper method chaining from the very beginning. This was something that I was very passionate about as it allowed you to write some very terse code. It even included new conventions like .end() which allowed you to “pop” off of the chain stack.

I honestly can’t remember if I had seem examples of chaining before I wrote this in to jQuery. I know that I was writing a lot of Perl at the time, which has a lot of mechanisms for manipulating arrays (map, grep, etc.). I suspect that that’s what I was most influenced by – but I can’t be 100% sure! The chaining in jQuery has gone on to influence a large number of other libraries, even in other languages, which is pretty cool.

Ahh – time for some CSS Selectors-in-JavaScript history! Thankfully Paul Irish wrote up a post charting some of these initial releases:
Javascript CSS Selector Engine Timeline

I was hugely inspired by Ben Nolan’s Behaviour library when working on jQuery. I wanted to make it super-easy to bind events to elements in the page, reducing the syntax required for Behaviour even more!

Archived version of the Behaviour library:
Behaviour : Using CSS selectors to apply Javascript behaviours

Behaviour used Simon Willison’s getElementsBySelector mini-library, which I was also inspired by. My selector engine implementation was directly inspired by his work. I wanted the library to be even more comprehensive, covering nearly all of the important CSS selectors, while also supporting XPath selectors(!!! More on that in a moment…)

I must’ve been made aware of Dean Edwards' cssQuery library some time before I released jQuery, however by that point I had already written my own engine. If memory serves me correctly Dean’s cssQuery was larger than the entirety of jQuery and I was really concerned about file size, so I opted not to switch over to it.

There was a lot of competition in the space. Behaviour + Prototype was popular and four days after I released jQuery Prototype introduced a native “$$(…)” method which took a CSS selector and returned a collection of DOM elements (I’m not sure if I’ve ever gotten confirmation if this was just coincidence of if they rushed to get it in after news of jQuery’s release spread – I’m betting it was just coincidence).

A few months later I wrote a blog post comparing the various state-of-the-art solutions comparing the syntax required to bind an event to multiple elements:
John Resig - Event Selector Showdown

You should probably be scratching your head if you’re familiar with CSS. This is actually my meager attempt at mapping some common XPath selectors to CSS! I wrote a whole blog post about this back in 2005, when I was experimenting with this concept:
John Resig - XPath and CSS Selectors

I really liked XPath selectors (they were much more powerful than the then-currently-available CSS selectors) and used them a bunch in my day-to-day coding. In retrospect focusing on CSS was a much better idea as it was more understandable to a wider audience. I believe the XPath selectors were removed by the 1.0 release – I was probably the only person who used them.

I’m kind of amazed that CSS still doesn’t have some equivalent to these selectors – they’re so useful! Selecting inputs by type, or all inputs in aggregate, is such a common operation. Glad we had these built in but it’d be ideal to be able to handle these natively!

Oofka! These Regexes are pretty gnarly… I’m sorry!

I just want to note how few comments there are in the original jQuery source. It’s really quite dramatic. Thankfully this is something that was improved upon over time!

That being said I am proud of the fact that jQuery had really good documentation from day 1:
jQuery: Documentation: Overview

This may not seem that surprising but at the time of its release jQuery was pretty much the only JavaScript library with documentation! I distinctly remember when PrototypeJS finally got some (community-created) documentation in January 2007 (a year after jQuery’s release). jQuery had a year-long head-start on documentation!

It bothered me that so few JavaScript libraries had documentation when I was making jQuery and I made a point to write online docs from the get-go. I’m glad I did!

I’m frequently surprised by how few developers will put in the (marginal) extra effort to document their code. So many more people will be able to use and understand if you do!

I noticed that I used new Array() and new RegExp() in the code – but I’m not entirely sure why! Why not just use [] and //?

Never was moved to a module! Still exists in jQuery to this day :)